{% extends 'base.html' %}
{% load static %}
{% block myCss %}
<style>
    .firstLevel {
        list-style: none;
    }
    .secondLevel {
        display: none;
    }
    #first1:hover ul, #first2:hover ul, #first3:hover ul, #first4:hover ul {
        display: block;
    }
    #first1, #first2, #first3, #first4 {
        float:left; /* 往左浮动 */
        width: 100px;
        height: 40px;
        margin: 20px 0;
    }
</style>
{% endblock myCss %}
{% block content %}
    <div class="commod-cont-wrap">
        <div class="commod-cont w1200 layui-clear">
            <div class="left-nav">
                <div class="title">所有分类</div>
                <div class="list-box">
                    {% for f in firsts %}
                        <dl>
                            <dt>{{ f.firsts }}</dt>
                            {% for t in typesList %}
                                {% if t.firsts == f.firsts %}
                                    <dd>
                                        <a href="{% url 'commodity:commodity' %}?t={{ t.id }}&n={{ n }}">{{ t.seconds }}</a>
                                    </dd>
                                {% endif %}
                            {% endfor %}
                        </dl>
                    {% endfor %}

                </div>
            </div>
            <div class="right-cont-wrap">
                <div class="right-cont">
                    <div class="sort layui-clear">

                        {#              <a {% if not s or s == 'sold' %}class="active" {% endif %} href="{% url 'commodity:commodity' %}?t={{ t }}&s=sold&n={{ n }}">销量</a>#}
                        {#              <a {% if s == 'price' %}class="active" {% endif %} href="{% url 'commodity:commodity' %}?t={{ t }}&s=price&n={{ n }}">价格</a>#}
                        {#              <a {% if s == 'created' %}class="active" {% endif %} href="{% url 'commodity:commodity' %}?t={{ t }}&s=created&n={{ n }}">新品</a>#}
                        {#              <a {% if s == 'likes' %}class="active" {% endif %} href="{% url 'commodity:commodity' %}?t={{ t }}&s=likes&n={{ n }}">收藏</a>#}
                        <ul class="firstLevel">
                            <li id="first1">销量
                                <ul class="secondLevel">
                                    <li><a {% if not s or s == 'sold' %}class="active" {% endif %} href="{% url 'commodity:commodity' %}?t={{ t }}&s=sold&n={{ n }}&flag=high">由高到低</a></li>
                                    <li><a {% if not s or s == 'sold' %}class="active" {% endif %} href="{% url 'commodity:commodity' %}?t={{ t }}&s=sold&n={{ n }}&flag=low">由低到高</a></li>
                                </ul>
                            </li>
                            <li id="first2">价格
                                <ul class="secondLevel">
                                    <li><a {% if s == 'price' %}class="active" {% endif %} href="{% url 'commodity:commodity' %}?t={{ t }}&s=price&n={{ n }}&flag=high">由高到低</a></li>
                                    <li><a {% if s == 'price' %}class="active" {% endif %} href="{% url 'commodity:commodity' %}?t={{ t }}&s=price&n={{ n }}&flag=low">由低到高</a></li>
                                </ul>
                            </li>
                            <li id="first3">新品
                                <ul class="secondLevel">
                                    <li><a {% if s == 'created' %}class="active" {% endif %} href="{% url 'commodity:commodity' %}?t={{ t }}&s=created&n={{ n }}&flag=high">由高到低</a></li>
                                    <li><a {% if s == 'created' %}class="active" {% endif %} href="{% url 'commodity:commodity' %}?t={{ t }}&s=created&n={{ n }}&flag=low">由低到高</a></li>
                                </ul>
                            </li>
                            <li id="first4">收藏
                                <ul class="secondLevel">
                                    <li><a {% if s == 'likes' %}class="active" {% endif %} href="{% url 'commodity:commodity' %}?t={{ t }}&s=likes&n={{ n }}&flag=high">由高到低</a></li>
                                    <li><a {% if s == 'likes' %}class="active" {% endif %} href="{% url 'commodity:commodity' %}?t={{ t }}&s=likes&n={{ n }}&flag=low">由低到高</a></li>
                                </ul>
                            </li>
                        </ul>

                    </div>
                    <div class="prod-number">
                        <a href="javascript:;">商品列表</a>
                        <span>></span>
                        <a href="javascript:;">共{{ commodityInfos|length }}件商品</a>
                    </div>
                    <div class="cont-list layui-clear" id="list-cont">
                        {% for p in pages.object_list %}
                            <div class="item">
                                <div class="img">
                                    <a href="{% url 'commodity:detail' p.id %}">
                                        <img height="280" width="280" src="{{ p.img.url }}"></a>
                                </div>
                                <div class="text">
                                    <p class="title">{{ p.name }}</p>
                                    <p class="price">
                                        <span class="pri">￥{{ p.price|floatformat:'2' }}</span>
                                        <span class="nub">{{ p.sold }}付款</span>
                                    </p>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div id="demo0" style="text-align: center;">
                <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1">
                    {% if pages.has_previous %}
                        <a href="{% url 'commodity:commodity' %}?t={{ t }}&s={{ s }}&n={{ n }}&p={{ pages.previous_page_number }}&flag=True"
                           class="layui-laypage-prev">上一页</a>
                    {% endif %}

                    {% for page in pages.paginator.page_range %}
                        {% if pages.number == page %}
                            <span class="layui-laypage-curr"><em
                                    class="layui-laypage-em"></em><em>{{ page }}</em></span>
                        {% elif pages.number|add:'-1' == page or pages.number|add:'1' == page %}
                            <a href="{% url 'commodity:commodity' %}?t={{ t }}&s={{ s }}&n={{ n }}&p={{ page }}&flag=True">{{ page }}</a>
                        {% endif %}
                    {% endfor %}

                    {% if pages.has_next %}
                        <a href="{% url 'commodity:commodity' %}?t={{ t }}&s={{ s }}&n={{ n }}&p={{ pages.pages.next_page_number }}&flag=True"
                           class="layui-laypage-next">下一页</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

{% block script %}
    layui.config({
    base: '{% static 'js/' %}'
    }).use(['mm','laypage','jquery'],function(){
    var laypage = layui.laypage,$ = layui.$,
    mm = layui.mm;
    $('.list-box dt').on('click',function(){
    if($(this).attr('off')){
    $(this).removeClass('active').siblings('dd').show()
    $(this).attr('off','')
    }else{
    $(this).addClass('active').siblings('dd').hide()
    $(this).attr('off',true)
    }
    })

    });
{% endblock script %}